//import { Line } from '@ant-design/plots';
import ReactDOM from 'react-dom';
import React from 'react';
import { Col, Row, DatePicker, Space, Tabs } from 'antd';
import type { DatePickerProps, GetProps, TabsProps } from 'antd';
import DemoLine from './DemoLine';
import DemoColumn from './DemoColumn';
import DemoPie from './DemoPie';

type RangePickerProps = GetProps<typeof DatePicker.RangePicker>;

const { RangePicker } = DatePicker;

const onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {
    console.log('onOk: ', value);
};
const onChange = (key: string) => {
    console.log(key);
};

const items: TabsProps['items'] = [
    {
        key: '1',
        label: '兑换量',
        children: <DemoLine />,
    },
    {
        key: '2',
        label: '兑换Top20',
        children: <DemoColumn />,
    },
    {
        key: '3',
        label: '兑换方式',
        children: <DemoPie />,
    },
];


const DashBoard: React.FC = () => (
    <>
        <Row>
            <Col push={8} span={8}>
                <Space direction="vertical" size={12}>

                    <RangePicker
                        showTime={{ format: 'HH:mm' }}
                        format="YYYY-MM-DD HH:mm"
                        onChange={(value, dateString) => {
                            console.log('Selected Time: ', value);
                            console.log('Formatted Selected Time: ', dateString);
                        }}
                        onOk={onOk}
                    //                      disabledDate={(currentDate) => {
                    //     const today = new Date();
                    //     today.setDate(today.getDate() - 8); // 设置为过去的8天
                    //     today.setHours(0, 0, 0, 0); // 设置时间为0点
                    //     const eightDaysLater = new Date(today);
                    //     eightDaysLater.setDate(eightDaysLater.getDate() + 60); // 设置为未来的60天
                    //     return currentDate.getTime() < today.getTime() || currentDate.getTime() > eightDaysLater.getTime();
                    // }}
                    //需要实现选择时间范围的设置，报错暂未解决
                    />
                </Space>

            </Col>
            <Col span={24}>
                <Tabs defaultActiveKey="1" items={items} onChange={onChange} />





            </Col>
        </Row>

    </>
);




export default DashBoard;